<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <script src="./dhuang.js"></script> -->
    <!-- <script src="./js.js"></script> 
    <script src="./jsshu.js"></script>
    <style>
        div
        {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left:400px;
            top:400px;
        }
      
    </style>
</head>
<body>
<button id="upBn">上</button>
<button id="downBn">下</button>
<button id="leftBn">左</button>
<button id="rightBn">右</button>
<div id="div0"></div>
    <script>
  var upBn=document.getElementById("upBn");
    var downBn=document.getElementById("downBn");
    var leftBn=document.getElementById("leftBn");
    var rightBn=document.getElementById("rightBn");
    var div=document.getElementById("div0");
    var speed=10;
    div.lefts=400;
    div.tops=400;
    upBn.addEventListener("click",clickHandler);
    downBn.addEventListener("click",clickHandler);
    leftBn.addEventListener("click",clickHandler);
    rightBn.addEventListener("click",clickHandler);
    function clickHandler() {
        switch (this){
            case upBn:
                div.tops-=speed;
                break;
            case downBn:
                div.tops+=speed;
                break;
            case leftBn:
                div.lefts-=speed;
                break;
            case rightBn:
                div.lefts+=speed;
                break;
        }
        div.style.left=div.lefts+"px";
        div.style.top=div.tops+"px";
    }
    </script>
</body>
</html> -->